<!DOCTYPE html>
<html ng-app="app" ng-controller="ioniccontroller">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!--js-->
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/ionic.bundle.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Swiper-3.3.1/dist/js/swiper.js" type="text/javascript" charset="utf-8"></script>
		
		<!--<script src="common/common.js" type="text/javascript" charset="utf-8"></script>-->
		
		<!--css-->
		<link rel="stylesheet" type="text/css" href="js/Swiper-3.3.1/dist/css/swiper.css"/>
		<link rel="stylesheet" type="text/css" href="js/bootstrap/css/bootstrap.css"/>
		<link rel="stylesheet" type="text/css" href="js/font-awesome-4.6.3/css/font-awesome.css"/>
		<link rel="stylesheet" type="text/css" href="css/ionic.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<div class="ck-head">
			<div class="col-xs-4">
				<span ng-click="fun(0)">我的音乐</span>
			</div>
			<div class="col-xs-4">
				<span ng-click="fun(1)">在线音乐</span>
			</div>
			<div class="col-xs-4">
				<span ng-click="fun(2)">搜索</span>
			</div>
		</div>
		<div class="ck-content">
			<ion-content>
				<ion-slide-box  show-pager='fase' active-slide="myActiveSlide" on-slide-changed="fn(index)">
					<!--第一屏-->
				  <ion-slide>
				    <div class="box">
				    	<ion-list>
						  <ion-item>登录</ion-item>
						  <ion-item>本地歌曲</ion-item>
						  <ion-item>我的下载</ion-item>
						  <ion-item>最近播放</ion-item>
						  <ion-item>我的歌单</ion-item>
						  <ion-item>我喜欢的</ion-item>
						  <ion-item class='favorite-box'>
						  	<div class="favorite">
						  		<i class="fa fa-music fa-2x"></i>
						  		<i class="fa fa-heart"></i>
						  	</div>
						  	
						  </ion-item>
						</ion-list>
				    </div>
				  </ion-slide>
				  
				  <!--第二屏-->
				  <ion-slide>
				    <div class="box online-mysic">
				    	<div class="swiper-container">
						  <div class="swiper-wrapper">
						    <div class="swiper-slide">
						    	<img src="img/onlinemusic-bg-2.jpg"/>
						    </div>
						    <div class="swiper-slide">
						    	<img src="img/online-bg.jpg"/>
						    </div>					
						  </div>
						   		<div class="swiper-pagination"></div>  <!--分页器-->
						</div>
						<script> 
							var mySwiper = new Swiper('.swiper-container', {
								autoplay: 5000,//可选选项，自动滑动
								pagination : '.swiper-pagination'
							})
						</script>
						
						<div class="kind-list">
							<p><span>推荐</span><span>更多</span></p>
							<div class="col-xs-4">
								<a href="songList.html?3">
									<img src="img/kinds1.jpg"/>
									<span>欧美</span>
								</a>
							</div>
							<div class="col-xs-4">
								<a href="songList.html?5">
									<img src="img/newsong.jpg"/>
									<span>内地</span>
								</a>
							</div>
							<div class="col-xs-4">
								<a href="songList.html?6">
									<img src="img/newsong2.jpg"/>
									<span>港台</span>
								</a>
							</div>
							<div class="col-xs-4">
								<a href="songList.html?16">
									<img src="img/kinds1.jpg"/>
									<span>韩国</span>
								</a>
							</div>
							<div class="col-xs-4">
								<a href="songList.html?17">
									<img src="img/kinds1.jpg"/>
									<span>日本</span>
								</a>
							</div>
							<div class="col-xs-4">
								<a href="songList.html?18">
									<img src="img/kinds1.jpg"/>
									<span>民谣</span>
								</a>
							</div>
							<div class="col-xs-4">
								<a href="songList.html?19">
									<img src="img/kinds1.jpg"/>
									<span>摇滚</span>
								</a>
							</div>
							<div class="col-xs-4">
								<a href="songList.html?23">
									<img src="img/kinds1.jpg"/>
									<span>销量</span>
								</a>
							</div>
							<div class="col-xs-4">
								<a href="songList.html?26">
									<img src="img/kinds1.jpg"/>
									<span>热歌</span>
								</a>
							</div>

						</div>
						
						
						
				    </div>
				  </ion-slide>
				  
				  <!--第三屏-->
				  <ion-slide>
				    <div class="box third">
				    	<div class="song-search form-group">
				    		<input type="text" class="form-control" placeholder="搜索歌曲、歌手">
				    	</div>
				    	<ion-list>
						  <ion-item>歌手Top100</ion-item>
						  <ion-item>最近很红</ion-item>
						  <ion-item>华语男歌手</ion-item>
						  <ion-item>华语女歌手</ion-item>
						  <ion-item>华语组合</ion-item>
						  <ion-item>欧美男歌手</ion-item>
						  <ion-item>欧美女歌手</ion-item>
						  <ion-item>欧美组合</ion-item>
						  <ion-item>欧美男歌手</ion-item>
						</ion-list>
				    </div>
				  </ion-slide>
				</ion-slide-box>
				
			</ion-content>
		</div>
		<div class="ck-foot">
			
		</div>
		<div class="main-mask">
			<!--<span class=".sk-spinner-three-bounce.sk-spinner">
				
			</span>-->
		</div>
	</body>
</html>
